<template>
  <view class="container">
    <view class="banner-box">
      <image src="/static/banner2.jpg" class="banner"></image>
    </view>
    <view v-if="productList.length != 0">
      <view class="product-item" v-for="product in productList" :key="product.id">
        <image :src="product.product_img" mode="aspectFill" class="goods-img"></image>
        <view class="product-info">
          <view class="product-name">{{ product.product_name }}</view>
          <view class="wrap">
            <view class="product-price">￥{{ product.price }}</view>
            <view class="quantity-container">
              <view @click="handleSuccess" class="btn">去选品</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-box">
      <image src="/static/mescroll-empty.png" class="empty-img"></image>
      <view class="empty-txt">~ 暂无商品展示 ~</view>

      <!-- <view class="bottom-btn" v-if="!userInfo && productList.length == 0">
        <view class="login-btn" @click="$utils.toPage('/pages/login/login')">点击登录</view>
      </view> -->
    </view>
  </view>
</template>
<script>
import {
	mapState,
	mapActions
} from 'vuex';
export default {
  data() {
    return {
      productList: [],
    };
  },
  computed: {
		...mapState('user', {
			userInfo: 'userInfo',
		}),
	},
  mounted() {
    console.log('coming task fuction')
    // this.getDatas();
    this.getWechatStoreGoods();
  },
  onLoad() {

  },
  methods: {
    //获取用户信息
    getUserInfo() {
      this.$api.baseInfo.getUserInfo().then(res => {
        console.log(res);
        let data = res.data;
        console.log(data.videoid)
        if (!data.videoid) {
          uni.$u.toast('请先到个人设置页面，设置个人视频号ID');
        } else {
          wx.openChannelsUserProfile({
            finderUserName: "sphNTAw1Ls1jwvP", // 视频号的原始ID，替换为自己的
          });
        }
      })
    },
    //跳转视频号主页
    handleSuccess() {
      this.getUserInfo();
    },
    //获取微信小店商品
    getWechatStoreGoods() {
      // if (!this.userInfo) {
      //   return;
      // }
      uni.showLoading({
        mask: true,
        title: '数据加载中...'
      })
      let obj = {
        page_size: 10,
        status: 5,
        next_key: '',
      }
      this.$api.taskObj.getWechatStoreGoods(obj).then(res => {
        console.log(res);
        let data = res.data;
        this.productList = data;
        uni.hideLoading();
      })
    }
  }
};
</script>
<style scoped>
.container {
  padding: 20rpx;
}

.product-item {
  display: flex;
  border-bottom: 1rpx solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20rpx;
}

.product-item image {
  width: 200rpx;
  height: 200rpx;
}

.product-info {
  flex: 1;
  padding: 10rpx 20rpx 0 20rpx;
}

.product-name {
  font-size: 30rpx;
}

.product-price {
  font-size: 32rpx;
  color: red;
  margin-top: 10rpx;
  font-weight: bold;

}

.quantity-container {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}


.banner {
  width: 100%;
  height: 240rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.goods-img {
  border-radius: 18rpx;
}

.quantity-container .btn {
  background: #f00 !important;
  border-radius: 40rpx !important;
  width: 140rpx !important;
  height: 48rpx !important;
  color: #fff !important;
  text-align: center;
  font-size: 28rpx;
  line-height: 48rpx;
}

.wrap {
  margin-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.empty-img {
  width: 240rpx;
  height: 240rpx;  
}

.empty-box {
  text-align: center;
  margin-top: 200rpx;
  font-size: 26rpx;
  color: #7a7474;
}

.bottom-btn {
  text-align: center;
  display: flex;
  /* position: relative; */
}

.login-btn {
  width: 260rpx;
  height: 70rpx;
  background: #2672fc;
  /* border: 1rpx solid #2672fc; */
  text-align: center;
  line-height: 70rpx;
  /* color: #2672fc; */
  color: #fff;
  border-radius: 60rpx;
  font-size: 28rpx;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.empty-txt {
  font-size: 24rpx;
}
</style>